/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
import React, { useMemo,useState,useEffect} from 'react'
import axios from 'axios'
export default function Cinema (){
const [mytext, setmytext] = useState("")
const [cinemaList, setcinemaList] = useState([])
useEffect(() => {
    axios({
        url:"https://m.maizuo.com/gateway?cityId=510100&ticketFlag=1&k=7884681",
        method:"get",
        headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16580266551103961213894657"}',
        'X-Host': 'mall.film-ticket.cinema.list'}
    }).then(res=>{
        console.log(res);
        setcinemaList(res.data.data.cinemas)
    })
}, [])
const getCinemaList=useMemo(()=> cinemaList.filter(item=> item.name.toUpperCase().includes(mytext.toUpperCase() ) 
||item.address.toUpperCase().includes(mytext.toUpperCase() )
)
,[cinemaList,mytext])
return  <div>
<input value={mytext}  onChange={(e)=>{
    setmytext(e.target.value)
}}/>
     {
         getCinemaList.map(item=>
             <dl key={item.cinemaId}>
                 <div style={{"marginLeft":"25px"}}>{item.name}</div>
             <div style={{"marginTop":"5px","marginLeft":"25px","backgroundColor":"#668"}}>{item.address}</div>
              </dl>)
     }

</div>
}

